<template>
    <div class="inputDom" :style="myStyles">

        <div class="leftText">{{ leftText }}</div>
        <el-date-picker v-if="!isDouble" v-model="inputValue" :type="types" :placeholder="hits" :size="'small'" :style="isHit ? {
            color: 'red',
            border: '1px solid red',
            boxShadow: '0 0 black',
            boxSizing: 'border-box',
            borderRadius: '3px', ...myStyles
        } : myStyles" :value-format="types == 'date' ? formData : 'YYYY-MM-DD HH:mm:ss'"
            :default-value="isDefaultValue ? new Date(2000, 0, 1) : null" :disabledDate="disabledDateFun" />

        <el-date-picker v-if="isDouble" v-model="inputValue" type="daterange" unlink-panels range-separator="→"
            start-placeholder="Start date" end-placeholder="End date" :size="'small'" :style="isHit ? {
                color: 'red',
                boxShadow: '0 0 black',
                border: '1px solid red',
                boxSizing: 'border-box',
                borderRadius: '3px', ...myStyles
            } : myStyles" value-format="YYYY-MM-DD" />
    </div>
</template>
    
<script>

export default {
    name: 'CommonInputTime',
    emits: ['returnData', 'clearData', 'mustCount'],
    components: {
    },
    props: {
        isShowLeftText: {
            default: false,
            type: Boolean
        },
        isDefaultValue: Boolean,
        disabledDate: {
            default: '',
            type: String
        },
        types: {
            default: 'date',
            type: String
        },
        formData: {
            default: 'YYYY-MM-DD',
            type: String
        },
        hit: {
            default: '',
            type: String
        },
        leftText: {
            default: '',
            type: String
        },
        myStyles: {
            default: { width: '160px' }
        },
        isMust: {
            default: false,
            type: Boolean
        },
        mustHit: {
            default: '',
            type: String
        },
        isDouble: Boolean,
        insertKey: String,
        default: {
            default: []
        }
    },
    data() {
        return {
            inputValue: this.default,
            hits: this.hit,
            isHit: false,
        }
    },
    mounted() {
    },
    methods: {
        inputReturn() {
            let flag = true
            if(!this.isMust){
                return true
            }
            if (!String(this.inputValue)?.trim() || this.inputValue == [] || this.inputValue == null) {
                this.hits = this.mustHit
                this.isHit = true
                flag = false
            }
            if (this.isDouble && this.inputValue.length == 2 && this.inputValue[0] == '' ||
                this.isDouble && this.inputValue.length == 2 && this.inputValue[1] == '') {
                this.hits = this.mustHit
                this.isHit = true
                flag = false
            }
            return flag
        },
        disabledDateFun(time) {
            if (this.disabledDate != '') {
                const disabledDate = new Date(this.disabledDate);
                disabledDate.setDate(disabledDate.getDate() - 1);
                return time.getTime() <  disabledDate.getTime();
            }

        }
    },
    watch: {
        inputValue: {
            handler() {
                if (this.inputValue != this.default) {
                    this.isHit = false
                    let temp = { [this.insertKey]: this.inputValue }
                    return this.$emit('returnData', temp)
                }
            }
        },
        default() {
            this.inputValue = this.default
        },
        disabledDate() {
            console.log(this.disabledDate)
        }
    },
    computed: {
    }

}
</script>
    
<style scoped>
.inputDom {
    display: flex;
    align-items: center;
    position: relative;
}

.myInput {
    outline: none;
    height: 20px;
    border: 1px solid rgb(220, 223, 230);
    padding-left: 8px;
    padding-right: 20px;
    border-radius: 3px;
    font-size: 12px;
    position: relative;
    margin: 1px;
    width: 100%;
}

.myInput:focus {
    border: 1px solid #6698ff;
}

.leftText {
    font-size: 12px;
    color: #999;
    position: absolute;
    right: 12px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: none;
}
</style>